<template>
	<el-dialog title="添加菜单&权限" v-model="dialogVisible" @close="dialogFormVisible">
		<el-form size="small" :model="formData" :rules="formRules" ref="form">
			<!--菜单名称-->
			<el-form-item label="菜单名称" prop="name" :label-width="formLabelWidth">
				<el-input v-model="formData.name" autocomplete="off" placeholder="请输入菜单名称"></el-input>
			</el-form-item>
			<!--类型-->
			<el-form-item label="类型" prop="name" :label-width="formLabelWidth">
				<el-radio-group v-model="formData.is_route">
					<el-radio :label="1">页面</el-radio>
					<el-radio :label="0">按钮</el-radio>
					<el-radio :label="2">独立单页面</el-radio>
				</el-radio-group>
			</el-form-item>
			<!--上级菜单-->
			<el-form-item label="上级菜单" prop="parent_id" :label-width="formLabelWidth">
				<el-cascader size="small" v-model="parentsVal" :options="accessList" :props="propsParam"
					@change="handleChange"></el-cascader>
			</el-form-item>
			<!--路径-->
			<el-form-item label="路径" prop="path" :label-width="formLabelWidth">
				<el-input v-model="formData.path" autocomplete="off" placeholder="请输入组件文件路径"></el-input>
				<p>提示：对应前端给的文件路径，例如：/index/index</p>
			</el-form-item>
			<!--图标-->
			<el-form-item label="图标" :label-width="formLabelWidth">
				<el-input v-model="formData.icon" autocomplete="off" placeholder="请输入icon"></el-input>
				<p>提示：请选择系统提供的图标，一级菜单生效</p>
			</el-form-item>
			<el-form-item label="上传图标" :rules="[{required: true,message: '请选择图标'}]" :label-width="formLabelWidth">
				<div class="ww100">
					<el-button @click="chooseImg('upload_icon')">选择图片</el-button>
					<el-button v-if="formData.upload_icon" @click="deleteImg()">清空</el-button>
				</div>
				<div class="d-c">
					<img class="mt10" :src="formData.upload_icon" :width="40">
					<div class="gray">一级菜单上传图标有效，优先使用上传图标，建议上传尺寸为40px*40px</div>
				</div>
			</el-form-item>
			<!--是否是菜单-->
			<el-form-item label="是否是菜单" :label-width="formLabelWidth" v-if="formData.is_route==1">
				<el-radio-group v-model="formData.is_menu">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<!--是否显示-->
			<el-form-item label="是否显示" :label-width="formLabelWidth">
				<el-radio-group v-model="formData.is_show">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<!--重定向-->
			<el-form-item label="重定向" :label-width="formLabelWidth" v-if="formData.is_route == 1">
				<el-input v-model="formData.redirect_name" autocomplete="off" placeholder="请输入重定向地址"></el-input>
			</el-form-item>
			<!--备注-->
			<el-form-item label="备注" prop="sort" :label-width="formLabelWidth">
				<el-input v-model="formData.remark" placeholder="请输入备注" type="textarea"></el-input>
			</el-form-item>
			<!--排序-->
			<el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
				<el-input v-model="formData.sort" placeholder="请输入排序" type="number"></el-input>
			</el-form-item>
		</el-form>
		<!--操作按钮-->
		<template #footer>
			<el-button @click="dialogFormVisible">取 消</el-button>
			<el-button type="primary" @click="onSubmit()" :disabled="loading">确 定</el-button>
		</template>
		<!--上传图片-->
		<Upload v-if="isupload" :isupload="isupload" :type="type" :config="{ total: 1 }" @returnImgs="returnImgsFunc">
		</Upload>
	</el-dialog>
</template>

<script>
	import {
		addpAccess
	} from '@/api/access.js';
	import {
		deepClone,
		formatModel
	} from '@/utils/base.js';
	import Upload from '@/components/file/Upload.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				/*是否加载中*/
				loading: false,
				/*form表单数据对象*/
				formData: {
					/*菜单名称*/
					name: '',
					/*路由地址*/
					path: '',
					/*组件名*/
					views: '',
					/*别名*/
					alias: '',
					/*图标*/
					icon: '',
					/*是否是菜单*/
					is_menu: 0,
					/*是否是路由*/
					is_route: 1,
					/*是否显示*/
					is_show: 1,
					/*排序*/
					sort: 1,
					/*父集ID*/
					parent_id: 0,
					/*上传图标*/
					upload_icon: ''
				},
				/*验证规则*/
				formRules: {
					name: [{
						required: true,
						message: '请输入菜单名称',
						trigger: 'blur'
					}],
					path: [{
						required: true,
						message: '请输入路径',
						trigger: 'blur'
					}],
					views: [{
						required: true,
						message: '请输入组件名称',
						trigger: 'blur'
					}],
					alias: [{
						required: true,
						message: '请输入别名',
						trigger: 'blur'
					}]
				},
				/*当前父集ID*/
				parentsVal: [],
				/*菜单列表*/
				accessList: [],
				/*排序*/
				srot: '1',
				/*左边长度*/
				formLabelWidth: '120px',
				/*是否显示*/
				dialogVisible: false,
				/*展示数据*/
				propsParam: {
					label: 'name',
					value: 'access_id',
					checkStrictly: true
				},
				/*是否打开图片选择*/
				isupload: false,
				type: '',
			};
		},
		props: {
			open_add: Boolean,
			add_type: String,
			rawData: Array,
			selectModel: Object
		},
		created() {

			this.dialogVisible = this.open_add;
			this.accessList = deepClone(this.rawData);
			this.accessList.unshift({
				name: '顶级菜单',
				access_id: 0
			});
			if (this.add_type == 'copy') {
				this.formData = formatModel(this.formData, this.selectModel);
				this.findParentsID(this.accessList);
			} else if (this.add_type == 'child') {
				this.formData.parent_id = this.selectModel.access_id;
				this.findParentsID(this.accessList);
			}
		},
		methods: {
			/*选择图片*/
			chooseImg(e) {
				this.type = e;
				this.isupload = true;
			},
			/*关闭选择图片*/
			returnImgsFunc(e) {
				this.isupload = false;
				if (e != null && e.length > 0) {
					if (this.type == 'upload_icon') {
						this.formData.upload_icon = e[0].image;
					}
				}
			},
			deleteImg() {
				this.formData.upload_icon = '';
			},
			/*选择菜单*/
			handleChange(e) {},

			/*查找父集id*/
			findParentsID(list) {
				let flag = false;
				for (let i = 0; i < list.length; i++) {
					let item = list[i];
					if (item.access_id == this.formData.parent_id) {
						this.parentsVal.unshift(item.access_id);
						flag = true;
						break;
					} else {
						let children = item.children;
						if (typeof children != 'undefined' && children.length > 0) {
							if (this.findParentsID(children)) {
								this.parentsVal.unshift(item.access_id);
								flag = true;
								break;
							}
						}
					}
				}
				return flag;
			},

			/*添加菜单*/
			onSubmit() {
				let self = this;
				let params = this.formData;
				if (self.parentsVal.length > 0) {
					params.parent_id = self.parentsVal[self.parentsVal.length - 1];
				}
				self.$refs.form.validate(valid => {
					if (valid) {
						self.loading = true;
						addpAccess(params)
							.then(res => {
								if (res.code == 1) {
									ElMessage({
										message: res.msg,
										type: 'success'
									});
									self.dialogFormVisible(true);
									self.loading = false;
								}
							})
							.catch(error => {
								self.loading = false;
							});
					}
				});
			},

			/*关闭弹窗*/
			dialogFormVisible(e) {
				if (e) {
					this.$emit('closeDialog', {
						type: 'success',
						openDialog: false
					});
				} else {
					this.$emit('closeDialog', {
						type: 'error',
						openDialog: false
					});
				}
			}
		}
	};
</script>

<style></style>